<template>
  <div class="project-main">
    <div class="p-left">
      <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"
        active-text-color="#3563E9">
        <template v-for="item in routerList">
          <el-submenu :index="item.routerName" v-if="item.children && item.children.length > 0" :key="item.routerName">
            <template slot="title">
              <img :src="activeIndex1 === item.routerName ? item.selectImg : item.img
                " alt="img" style="width: 25px;height: 25px;" />
              <span class="nav-label" :class="[
                activeIndex1 === item.routerName && 'nav-label-active',
              ]">{{ item.label }}</span>
            </template>
            <el-menu-item v-for="child in item.children" :index="child.routerName" :key="child.routerName">
              <i class="menu-c" :style="{
                background:
                  activeIndex === child.routerName ? '#3563E9' : '#eee',
              }"></i>
              <span :class="[activeIndex === item.routerName && 'nav-label-active']" style="font-size: 16px;">
                {{ child.label }}
              </span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :key="item.routerName" :index="item.routerName">
            <img :src="activeIndex === item.routerName ? item.selectImg : item.img" alt="img"
              style="width: 26px;height: 26px;" />
            <span class="nav-label" :class="[activeIndex === item.routerName && 'nav-label-active']">{{ item.label
            }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <div class="p-right">
      <transition name="el-fade-in" mode="out-in">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>
      <transition name="el-fade-in" mode="out-in">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </transition>
    </div>
  </div>
</template>
<script>
import img1 from '@img/project/icon-xmzl.png';
import imgSelect1 from '@img/project/icon-xmzl-select.png';
import img2 from '@img/project/icon-xmts.png';
import imgSelect2 from '@img/project/icon-xmts-select.png';
import img3 from '@img/project/icon-zdxm.png';
import imgSelect3 from '@img/project/icon-zdxm-select.png';
import img4 from '@img/project/icon-tzgl.png';
import imgSelect4 from '@img/project/icon-tzgl-select.png';
import img5 from '@img/project/icon-tjfx.png';
import imgSelect5 from '@img/project/icon-tjfx-select.png';

export default {
  data() {
    return {
      activeIndex: sessionStorage.getItem('activeMenu') || 'overview3',
      routerList: [
        {
          id: '0',
          label: '项目总览',
          routerName: 'overview3',
          activeName: 'overview3',
          img: img1,
          selectImg: imgSelect1
        },
        {
          id: '1',
          label: '项目推送',
          routerName: 'projectPush4',
          activeName: 'projectPush4',
          img: img2,
          selectImg: imgSelect2
        },
        {
          id: '2',
          label: '重点项目',
          routerName: 'keyProject4',
          activeName: 'keyProject4',
          img: img3,
          selectImg: imgSelect3
        },
        {
          id: '3',
          label: '台账管理',
          routerName: 'ledger4',
          activeName: 'ledger4',
          img: img4,
          selectImg: imgSelect4,
          children: [
            {
              id: '3-1',
              label: '在谈库',
              routerName: 'ledger1',
              activeName: 'ledger1'
            },
            {
              id: '3-2',
              label: '签约库',
              routerName: 'ledger2',
              activeName: 'ledger2'
            },
            {
              id: '3-3',
              label: '开工库',
              routerName: 'ledger3',
              activeName: 'ledger3'
            }
          ]
        },
        {
          id: '4',
          label: '统计分析',
          routerName: 'analysis',
          activeName: 'analysis',
          img: img5,
          selectImg: imgSelect5,
          children: [
            {
              id: '4-1',
              label: '指标分析',
              routerName: 'indexAnalysis',
              activeName: 'indexAnalysis'
            },
            {
              id: '4-2',
              label: '项目分析',
              routerName: 'projectAnalysis',
              activeName: 'projectAnalysis'
            }
          ]
        }
      ],
      activeIndex1: sessionStorage.getItem('activeIndex1') || ''
    };
  },
  watch: {
    // "$route.name": function(newVal, oldVal) {
    //   this.activeName = newVal;
    //   this.selectName = newVal;
    //   this.routerList.map((item) => {
    //     if (item.routerName == newVal) {
    //       this.$bus.$emit("setActive", "projectmanage");
    //       this.$refs.MyTree.setCurrentKey(item.id);
    //       this.$refs.MyTree.setCurrentKey(item.id);
    //     }
    //   });
    // },
  },
  mounted() {
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
      if (key.indexOf('ledger') !== -1) {
        this.activeIndex1 = 'ledger4';
        sessionStorage.setItem('activeIndex1', this.activeIndex1);
      } else if (key.indexOf('Analysis') !== -1) {
        this.activeIndex1 = 'analysis';
        sessionStorage.setItem('activeIndex1', this.activeIndex1);
      } else {
        this.activeIndex1 = '';
        sessionStorage.removeItem('activeIndex1');
      }
      this.activeIndex = key;
      console.log(key, keyPath);
      sessionStorage.setItem('activeMenu', key);
    },
    handleNodeClick(data) {
      // if (data.routerName == "account3") {
      //   localStorage.setItem("activeStatus", 1);
      // }
      this.activeName = data.routerName;
      this.selectName = data.activeName;
      this.$router.push(data.routerName);
      this.$refs.MyTree.setCurrentKey(data.id);
    },
    setMenuAuth() {
      this.$bus.$emit('setActive', 'projectmanage');
      // 页面权限
      let pageList = localStorage.getItem('pageList').split(',');
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog--center .el-dialog__body {
  text-align: center;
  padding: 20px 20px 0 20px;
}

/deep/ .el-dialog__header {
  border-bottom: 1px solid #e5e5e5;
}

/deep/ .el-dialog__title {
  font-weight: bold;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  font-weight: bold;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #4D82FF;
}

/deep/ .el-pagination.is-background .el-pager li {
  min-width: 26px;
}

/deep/ .el-pager li {
  height: 26px;
}

/deep/ .el-icon-arrow-down:before {
  content: "\e790";
}

/deep/ .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
  color: #3563E9;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #F9FAFA;
}

.project-main {
  width: 100%;
  height: 100%;
  display: flex;
  background: #f6f7fb;
  font-size: 14px;

  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    background: #D0D4DB;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0;
    background: #EAEDF3;
  }

  .p-left {
    width: 240px;
    background: transparent;

    .nav-label {
      padding-left: 10px;
      font-size: 18px;
    }

    .menu-c {
      display: inline-block;
      width: 4px;
      height: 4px;
    }

    .nav-label-active {
      font-weight: bold;
      color: #3563e9;
    }

    /deep/ .el-menu {
      background: transparent;
      height: 100%;
    }

    /deep/ .el-dropdown-menu__item,
    .el-menu-item,
    /deep/ .el-submenu__title {
      font-size: inherit;
    }
  }

  .p-right {
    flex: 1;
    margin: 20px;
    background: white;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 20px;
    text-align: left;
    overflow: hidden;
  }

  // #5473E8
  /deep/ .el-button--primary,
  /deep/ .el-tag--dark.el-tag--primary {
    background-color: #4D82FF;
    border-color: #4D82FF;
  }

  /deep/ .el-button--warning,
  /deep/ .el-tag--dark.el-tag--warning {
    background-color: #f58e18;
    border-color: #f58e18;
  }

  /deep/ .el-button--danger,
  /deep/ .el-tag--dark.el-tag--danger {
    background-color: #e85454;
    border-color: #e85454;
  }

  /deep/ .el-button--info,
  /deep/ .el-tag--dark.el-tag--info {
    background-color: #9f9f9f;
    border-color: #9f9f9f;
  }
}
</style>
